<template>
  <div>
    <a-button type="primary" ghost @click="onOpen">预约客户</a-button>
    <a-modal v-model:visible="open" centered title="预约客户" :width="1000" :footer="null" @cancel="open = false">
      <a-form ref="formRef" class="form-style-flex">
        <a-form-item label="" class="w-60 mr-2">
          <a-input v-model:value="formState.pyjm" placeholder="姓名/助记码/卡号/手机号/身份证" />
        </a-form-item>
        <a-form-item name="dateRange" label="预约日期" class="w-[320px] mr-2">
          <a-range-picker v-model:value="formState.dateRange" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
        </a-form-item>
        <a-form-item name="ysName" label="预约医生" class="w-72 mr-4">
          <a-input v-model:value="formState.ysName" placeholder="请输入" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="getData">搜索</a-button>
        </a-form-item>
      </a-form>
      <BaseTable :loading="loading" :columns="columns" :height="400" :scroll="{ x: 1200 }" :data-source="tableData" bordered>
        <template #bodyCell="{ column, index, record }">
          <template v-if="column.dataIndex === 'xh'">
            {{ index + 1 }}
          </template>
          <template v-if="column.dataIndex === 'brName'">
            <span>{{ record.brName }}</span>
            <span class="ml-2 text-gray-400 text-xs">{{ record.brXb }}</span>
            <span class="ml-2 text-gray-400 text-xs">{{ record.brAge }}</span>
          </template>
          <template v-if="column.dataIndex === 'action'">
            <a-button type="link" size="small" :disabled="record.yyzt !== '0'" @click="onRegister(record)"> 挂号 </a-button>
          </template>
        </template>
      </BaseTable>
    </a-modal>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'

const emit = defineEmits(['register'])
const columns = [
  { title: '序号', dataIndex: 'xh', width: 50 },
  { title: '姓名', dataIndex: 'brName' },
  { title: '手机号', dataIndex: 'brMob' },
  { title: '预约时间', dataIndex: 'yysj' },
  { title: '预约医生', dataIndex: 'ysName' },
  { title: '业务员', dataIndex: 'ywyName' },
  { title: '首诊院区', dataIndex: 'ksmc', width: 160, ellipsis: true },
  { title: '病案号', dataIndex: 'brBlkh' },
  { title: '创建时间', dataIndex: 'createTime', width: 160 },
  { title: '操作', dataIndex: 'action', fixed: 'right' }
]
const open = ref(false)
const formState = ref({
  dateRange: [dayjs().format('YYYY-MM-DD'), dayjs().add(7, 'day').format('YYYY-MM-DD')]
})
const { loading, tableData, getData } = useTable({
  url: '/outp/mzdj/getBookingList',
  pagination: false,
  params: formState.value
})

const onOpen = () => {
  open.value = true
  getData()
}

const onRegister = (record) => {
  open.value = false
  emit('register', record)
}
</script>
